<div class="mat-elevation-z8">
  <mat-form-field>
    <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
  </mat-form-field>
  <table mat-table class="full-width-table" matSort aria-label="Elements">
    <ng-container matColumnDef="displayName">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
      <td mat-cell *matCellDef="let row"><a [routerLink]="['/devices/', row.objectId]">{{row.displayName}}</a></td>
    </ng-container>

    <ng-container matColumnDef="accountEnabled">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Enabled</th>
      <td mat-cell *matCellDef="let row"><mat-icon *ngIf="row.accountEnabled" aria-hidden="false" aria-label="Enabled">check</mat-icon></td>
    </ng-container>

    <ng-container matColumnDef="deviceManufacturer">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Manufacturer</th>
      <td mat-cell *matCellDef="let row">{{row.deviceManufacturer}}</td>
    </ng-container>

    <ng-container matColumnDef="deviceModel">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Model</th>
      <td mat-cell *matCellDef="let row">{{row.deviceModel}}</td>
    </ng-container>

    <ng-container matColumnDef="deviceOSType">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>OS</th>
      <td mat-cell *matCellDef="let row">{{row.deviceOSType}}</td>
    </ng-container>

    <ng-container matColumnDef="deviceOSVersion">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>OS Version</th>
      <td mat-cell *matCellDef="let row">{{row.deviceOSVersion}}</td>
    </ng-container>

    <ng-container matColumnDef="deviceTrustType">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Trust type</th>
      <td mat-cell *matCellDef="let row">{{row.deviceTrustType}}</td>
    </ng-container>

    <ng-container matColumnDef="isCompliant">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Compliant</th>
      <td mat-cell *matCellDef="let row"><mat-icon *ngIf="row.isCompliant" aria-hidden="false" aria-label="Compliant">check</mat-icon></td>
    </ng-container>

    <ng-container matColumnDef="isManaged">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Managed</th>
      <td mat-cell *matCellDef="let row"><mat-icon *ngIf="row.isManaged" aria-hidden="false" aria-label="Managed">check</mat-icon></td>
    </ng-container>

    <ng-container matColumnDef="isRooted">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Rooted</th>
      <td mat-cell *matCellDef="let row"><mat-icon *ngIf="row.isRooted" aria-hidden="false" aria-label="Rooted">check</mat-icon></td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
  <mat-paginator [pageSizeOptions]="[50, 100, 500, 1000, 5000]"></mat-paginator>
</div>
<router-outlet></router-outlet>
